<template>
  <div class="waterfall">
    <ul>
      <li>
        <div class="waterfall_item three">
          <div class="waterfall_item_left">
            <div class="waterfall_item_left_top">
              <router-link
                :to="{
                  name: 'CONTENT',
                  params: {
                    contentid: nitems[0][0].content.contentId,
                    usid: nitems[0][0].userId,
                  },
                }"
              >
                <img v-lazy="nitems[0][0].content.url" />
              </router-link>
            </div>
            <div class="waterfall_item_left_bottom">
              <router-link
                :to="{
                  name: 'CONTENT',
                  params: {
                    contentid: nitems[0][1].content.contentId,
                    usid: nitems[0][1].userId,
                  },
                }"
              >
                <img v-lazy="nitems[0][1].content.url" />
              </router-link>
            </div>
          </div>
          <div class="waterfall_item_right single">
            <router-link
              :to="{
                name: 'CONTENT',
                params: {
                  contentid: nitems[0][2].content.contentId,
                  usid: nitems[0][2].userId,
                },
              }"
            >
              <img v-lazy="nitems[0][2].content.url" />
            </router-link>
          </div>
        </div>
        <div class="waterfall_item six">
          <div class="waterfall_item_six_top">
            <router-link
              :to="{
                name: 'CONTENT',
                params: {
                  contentid: nitems[1][0].content.contentId,
                  usid: nitems[1][0].userId,
                },
              }"
            >
              <img v-lazy="nitems[1][0].content.url" />
            </router-link>
            <router-link
              :to="{
                name: 'CONTENT',
                params: {
                  contentid: nitems[1][1].content.contentId,
                  usid: nitems[1][1].userId,
                },
              }"
            >
              <img v-lazy="nitems[1][1].content.url" />
            </router-link>
            <router-link
              :to="{
                name: 'CONTENT',
                params: {
                  contentid: nitems[1][2].content.contentId,
                  usid: nitems[1][2].userId,
                },
              }"
            >
              <img v-lazy="nitems[1][2].content.url" />
            </router-link>
          </div>
          <div class="waterfall_item_six_bottom">
            <router-link
              :to="{
                name: 'CONTENT',
                params: {
                  contentid: nitems[1][0].content.contentId,
                  usid: nitems[1][0].userId,
                },
              }"
            >
              <img v-lazy="nitems[1][0].content.url" />
            </router-link>
            <router-link
              :to="{
                name: 'CONTENT',
                params: {
                  contentid: nitems[1][1].content.contentId,
                  usid: nitems[1][1].userId,
                },
              }"
            >
              <img v-lazy="nitems[1][1].content.url" />
            </router-link>
            <router-link
              :to="{
                name: 'CONTENT',
                params: {
                  contentid: nitems[1][2].content.contentId,
                  usid: nitems[1][2].userId,
                },
              }"
            >
              <img v-lazy="nitems[1][2].content.url" />
            </router-link>
          </div>
        </div>
        <div class="waterfall_item three">
          <div class="waterfall_item_left single">
            <router-link
              :to="{
                name: 'CONTENT',
                params: {
                  contentid: nitems[2][0].content.contentId,
                  usid: nitems[2][0].userId,
                },
              }"
            >
              <img :src="nitems[2][0].content.url" />
            </router-link>
          </div>
          <div class="waterfall_item_right">
            <div class="waterfall_item_right_top">
              <router-link
                :to="{
                  name: 'CONTENT',
                  params: {
                    contentid: nitems[2][1].content.contentId,
                    usid: nitems[2][1].userId,
                  },
                }"
              >
                <img v-lazy="nitems[2][1].content.url" />
              </router-link>
            </div>
            <div class="waterfall_item_right_bottom">
              <router-link
                :to="{
                  name: 'CONTENT',
                  params: {
                    contentid: nitems[2][2].content.contentId,
                    usid: nitems[2][2].userId,
                  },
                }"
              >
                <img v-lazy="nitems[2][2].content.url" />
              </router-link>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "WaterFall",
  props: {
    items: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      nitems: [],
    };
  },
  created() {
    let a = 0,
      n = [],
      b = [],
      d = this.$props.items,
      e = 0;
    for (let i = 0; i < d.length; i++) {
      e += 1;
      if (!(i >= a && i < a + 3)) {
        a += 3;
        let c = [].concat(b);
        n.push(c);
        b.length = 0;
        b.push(d[i]);
      } else {
        b.push(d[i]);
      }
    }
    let c = [].concat(b);
    n.push(c);
    b.length = 0;
    console.log(n);
    this.nitems = n;
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.waterfall {
  .waterfall_item {
    &.three {
      display: flex;
      overflow: hidden;
      margin: 2 / @base 0 0;
      .waterfall_item_left {
        width: 40%;
        height: 100 / @base;
        &.single {
          width: 60%;
          height: 200 / @base;
          a {
            display: block;
            height: 200 / @base;
            margin: 0 2 / @base 0 0;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .waterfall_item_left_top {
          a {
            display: block;
            height: 100 / @base;
            margin: 0 0 2 / @base 0;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .waterfall_item_left_bottom {
          a {
            display: block;
            height: 100 / @base;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .waterfall_item_right {
        width: 40%;
        height: 100 / @base;
        &.single {
          width: 60%;
          height: 200 / @base;
          a {
            display: block;
            height: 200 / @base;
            margin: 0 0 0 2 / @base;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .waterfall_item_right_top {
          a {
            display: block;
            height: 100 / @base;
            margin: 0 0 2 / @base 0;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .waterfall_item_right_bottom {
          a {
            display: block;
            height: 100 / @base;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    &.six {
      overflow: hidden;
      .waterfall_item_six_top {
        display: flex;
        a {
          display: block;
          width: 33.3333%;
          height: 100 / @base;
          margin: 2 / @base 2 / @base 0 0;
          &:last-child {
            margin: 2 / @base 0 0;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .waterfall_item_six_bottom {
        display: flex;
        a {
          display: block;
          width: 33.3333%;
          height: 100 / @base;
          margin: 2 / @base 2 / @base 0 0;
          &:last-child {
            margin: 2 / @base 0 0;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
